OVERVIEW
WIZE is a human resource management (HRM) product that provides a strategic way to know, grow and optimize teams through personalized learning journeys and career paths.
Although WIZE is a B2B product with the end target being other businesses the marketing website that I have worked on aimed at raising awareness for the product amongst three groups of people - learning and development professionals, management and regular employees that could eventually advocate for using the platform in their respective companies.
Although WIZE is a B2B product with the end target being other businesses the marketing website that I have worked on aimed at raising awareness for the product amongst three groups of people - learning and development professionals, management and regular employees that could eventually advocate for using the platform in their respective companies.
UNDERSTANDING THE USERS
Defining personas at an early stage of the project was crucial as it helped identify the users we designed for and their different needs. Personas made the design task at hand less complex as they provided a guidance through the ideation process, and they helped us achieve the goal of creating a good user experience for the target user group.
Website Information
Content type and placement is also really important. Content that is placed above the fold is what the user will see first. That’s why the team and I have decided to place explanatory videos there as they would give more info about the 3 main propositions of the product - to know, grow, optimize people’s talent. The learning curve when watching videos, images and icons is shorter than when only reading texts. I have worked on custom animations throughout the website done in After Effects following the stakeholder's structure of critical information to be communicated. How this information would be represented in the videos was up to my vision and creativity.
I used mega menus to further elaborate on the 3 main propositions of the product and provide more information at different interaction points of the website.
Call to Action buttons placed at multiple points throughout the website prompting users to sign for a free trial and book a demo were essential for their conversion. By also placing the buttons in the sticky top navigation bar I made sure that the CTA cannot be missed.
Accessibility of FORMS
A common mistake when designing forms is to put the label of the field inside and then it disappearing when the user starts to fill the form. If the label is placed above the field it is detected by assistive technologies and read by the screen reader to users with disabilities. Providing a hint also improves the user experience. Correct metadata labels is also needed for enhancing the accessibility of forms. I have also used instant input validation for the form - it is a way to increase the usability of the sign-up and login pages. The users do not have to wait to submit the form to see any errors that need their attention. Instant validation helps them easily relate the feedback with the input they have just provided so that they can correct it right away.
MOBILE DESIGN
I have designed with responsiveness in mind. When preparing the files for development hand-off I have adapted all desktop pages for mobile devices so as to account for specific cases (like this pricing page that I have changed to a horizontal scroll table for mobile) and many more. In that way I wanted to minimize the chance for poor mobile user experience and to unburden the engineering team with making decisions in terms of responsiveness that they would not be comfortable with.
Design Hand-off
Using a type scale and defining a colour scheme early on in the project is really important to help avoid annoying inconsistencies in the design and provide for better usability. I have prepared a guide for the engineering team to use that included these and interaction design specifications such as states of buttons and menus, error states etc. Proper interaction design (IxD) also ensures good usability and task completion efficiency.
conclusion
I have worked for a year on the website closely cooperating with stakeholders and marketing managers alongside my head of design Julija Petrushevska who have previously put a lot of effort in the project before handing it off to me. In the interim we have released a Landing Page that I have worked on with the most essential product information aimed at early adopters audience. A struggle I have encountered was the constant feature creep (like adding a "resources" section almost at the end of the project). Marketing websites often get overloaded by information and features by the requests of different departments and stakeholders and as a UX designer I strived to understand why they see the need for the new feature or information to be included and what would be the users needs before implementing it in the design. Unfortunately this project did not come to fruition because of a total brand redesign that ensued but I was nevertheless grateful to learn a lot along the way.
THANK YOU!
